<template>
	<view>
		<cu-custom style="height: 0px;" bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">出入库单详情</block>
		</cu-custom>
		<view class="content" style="padding-top: 0rpx;">
			<view style="margin-top: 20rpx;padding-top: 0px;" class="content-body">
				<view class="shop-car">
					<view class="store-box">
						<view style="margin-top:30rpx;margin-bottom: 0rpx;" class="ETBJAndFSEntitytitle">
							<text style="font-size: 30rpx !important;"  class="ETBJAndFSEntitytitle-left">
								<text class="bxImg cuIcon-read text-orange" style="margin-right: 20rpx;height: 40rpx;width: 40rpx"></text>
								单据信息
							</text>
						</view>
						<view class="ETBJAndFSEntitytitle">
							<text class="ETBJAndFSEntitytitle-left">单号：{{detailData.InOutStorageNumbers}}</text>
						</view>
						<view class="goods-content-wrap">
							<view style="margin-top: 0rpx;"  class="goods-stock-wrap">
								<view class="goods-stock">单据日期</view>
								<view class="goods-stock-middle">{{detailData.InOutStorageDate}}</view>
							</view>
							<view class="goods-stock-wrap">
								<view class="goods-stock">出入库类型</view>
								<view class="goods-stock-middle">{{detailData.InOutStorageTypeName}}</view>
							</view>
							<view class="goods-stock-wrap">
								<view class="goods-stock">仓库</view>
								<view class="goods-stock-middle">{{detailData.WarehouseName}}</view>
							</view>
							<view class="goods-stock-wrap">
								<view class="goods-stock">操作人</view>
								<view class="goods-stock-middle">{{detailData.AddUserName}}</view>
							</view>
							<view class="goods-stock-wrap">
								<view class="goods-stock">备注</view>
								<view class="goods-stock-middle">{{detailData.Remark}}</view>
							</view>
							<view style="margin-bottom: 40rpx;" class="goods-stock-wrap">
								<view class="goods-stock">操作时间</view>
								<view class="goods-stock-middle">{{detailData.AddTime}}8</view>
							</view>
						</view>
					</view>
				</view>
				<view class="shop-car">
					<view class="store-box">
						<view style="margin-top:40rpx;margin-bottom: 0rpx;" class="ETBJAndFSEntitytitle">
							<text style="font-size: 30rpx !important;"  class="ETBJAndFSEntitytitle-left">
								<text class="bxImg cuIcon-edit text-blue" style="margin-right: 20rpx;height: 40rpx;width: 40rpx"></text>
								备件信息
							</text>
						</view>
						<view v-for="(item, index) in detailData.SpareList" class="goodsInfo">
							<view class="goodsInfo-right">
								<image :src="item.SpareImage==''?spareNoData:item.SpareImage" class="goods-image" mode=""></image>
								<view class="goodsInfo-box">
									<text class="goods-name">{{item.SpareName}}</text>
									<text class="spe">型号：{{item.SpareModel}}</text>
									<text class="spe">编码：{{item.SpareCode}}</text>
									<view class="goods-box">
										<text class="goods-price">数量：{{item.Quantity}}</text>
										<!-- <text class="goods-price1">数量：2</text> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/common/request.js';
export default {
    data() {
        return {
			spareNoData:this.$request22.baseUrl1+'/Resource/Sg/spare/sparenodata.png',
			getData:{
				Id:''
			},
			detailData:{
				
			}
		};
    },
	onLoad(option) {
		this.getData.Id=option.Id
		this.getInfo()
	},
    methods: {
		getInfo(){
			let that=this
			uni.showLoading({
				title:"加载中..."
			})
			let opts = {
				url: 'SpareApi/GetInOutSpareInfo',
				method: 'get'
			};
			request.httpTokenRequest(opts,that.getData).then(res => {
				uni.hideLoading()
				if(res.data.code == 1){
					that.detailData=res.data.data
				}
				else{
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			});
		},
  },
};
</script>



<style lang="scss" scoped>	
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 30rpx;
}


.each{
	width: 100%;
}
.content-body{
	padding-top: 20rpx;
	padding-bottom: 200rpx;
	width: 100%;
	background-color: white;
}
.goods-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 4rpx;
	flex: none;
}
.goods-content-wrap {
	padding-left: 24rpx;
}	
.goods-name {
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	position: relative;
}

.goods-stock-wrap {
	display: flex;
	color: #969696;
	font-size: 24rpx;
	margin-top: 12rpx;
}

.goods-stock {
	margin-right: 24rpx;
}


.empty-shop-car {
	width: 750rpx;
	min-height: 680rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	.empty-shop-car-image {
		width: 340rpx;
		height: 278rpx;
		margin-top: 102rpx;
	}

	text {
		margin-top: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}

	.empty-shop-car-btn {
		width: 240rpx;
		height: 90rpx;
		background: #0081ff;
		color: #FFFFFF;
		border-radius: 200rpx;
		margin-top: 40rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		font-weight: 400;
	}
}
	
	.shop-car {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F3F4F6;
	
		.shop-car-header {
			width: 690rpx;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
	
			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #313133;
			}
		}
	
		.store-box {
			width: 750rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #FFFFFF;
	
			.goodsInfo {
				width: 690rpx;
				height: 266rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 2rpx solid #EDEDED;
	
				&:nth-last-child(1) {
					border: none;
				}
	
				.checked-image {
					width: 36rpx;
					height: 36rpx;
				}
	
				.goodsInfo-right {
					width: 634rpx;
					height: 246rpx;
					margin-left: 20rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
	
					.goods-image {
						width: 180rpx;
						height: 180rpx;
					}
	
					.goodsInfo-box {
						width: 428rpx;
						margin-left: 24rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
	
						.goods-name {
							width: 428rpx;
							font-size: 32rpx;
							font-weight: 600;
							color: #313133;
							
						}
	
						.spe {
							width: 428rpx;
							margin-top: 12rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #919298;
						}
	
						.goods-box {
							width: 428rpx;
							margin-top: 18rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
	
							.goods-price {
								font-size: 32rpx;
								font-weight: 400;
								color: #e7612e;
							}
							.goods-price1 {
								font-size: 28rpx;
								font-weight: 600;
								color: #54B886;
							}
							
							.goods-num-box {
								width: 168rpx;
								height: 46rpx;
								display: flex;
								flex-direction: row;
								align-items: center;
	
								.goods-image {
									width: 46rpx;
									height: 44rpx;
									text-align: center;
									line-height: 44rpx;
									border: 1rpx solid #CFCFCF;
									font-size: 38rpx;
								}
	
								.goods-num {
									width: 76rpx;
									height: 44rpx;
									text-align: center;
									line-height: 44rpx;
									font-size: 33rpx;
									font-weight: 400;
									color: #666666;
									border-top: 1px solid #CFCFCF;
									border-bottom: 1px solid #CFCFCF;
								}
							}
						}
					}
				}
			}
		}
	}
	.ETBJAndFSEntitytitle{
		width: 100%;
		height: 80rpx;
		//border-bottom: 1px solid #F2F5F9;
		padding-left: 40rpx;
		margin-bottom: 0rpx;
		line-height: 80rpx;
		.ETBJAndFSEntitytitle-left{
			width: 80%;
			height: 100%;
			text-align: left;
			color: #313133;
			font-size: 28rpx;
			font-weight: 600;
			display: block;
			float: left;
		}
		.ETBJAndFSEntitytitle-right{
			width: auto;
			height: 100%;
			text-align: right;
			color: #313133;
			font-size: 28rpx;
			font-weight: 600;
			display: block;
			float: right;
			margin-right: 40rpx;
		}
		// 1 审核中，2 通过，3 驳回
		.status1{
			color: #FC9979;
		}
		.status2{
			color: #54B886;
		}
		.status3{
			color: #e54d42;
		}
		
		.bottom {
			line-height: 70rpx;
			display: flex;
			align-items: center;
			.btnBox{
				width: 220rpx;
				display: flex;
				justify-content: space-between;
				float:right;
				margin-right: 20rpx;
				.btn {
					line-height: 62rpx;
					width: 220rpx;
					border-radius: 31rpx;
					border: 2rpx solid $u-tips-color;
					font-size: 26rpx;
					text-align: center;
					color: $u-tips-color;
				}
				.evaluate {
					color: $u-type-primary;
					border-color: $u-type-primary;
				}
				.evaluate1 {
					color:white;
					background-color: $u-type-primary;
					border-color: $u-type-primary;
					// color: $u-type-primary;
					// border-color: $u-type-primary;
				}
			}
		}
	}
	.goods-content-wrap{
		width: 100%;
		padding-left: 40rpx;
		padding-right: 40rpx;
	}
	.goods-stock-wrap {
		display: flex;
		color: #969696;
		font-size: 28rpx;
		margin-top: 30rpx;
		justify-content:space-between
	}
	.goods-stock-middle{
		font-size: 28rpx;
		color: #595f6e;
		line-height: 32rpx;
		font-weight: 400;
	}
</style>